<template>
  <article 
    class="group relative bg-white/60 backdrop-blur-sm hover:bg-white/80 transition-all duration-300 cursor-pointer border-b border-gray-100/50 last:border-b-0 hover:shadow-lg hover:-translate-y-1"
    :class="{ 'bg-gradient-to-r from-amber-50/80 to-orange-50/80 border-l-4 border-l-orange-400': post.isPinned }"
    @click="navigateToPost(post.id)"
  >
    <div class="p-6 lg:p-8">
      <!-- 帖子头部 -->
      <div class="flex flex-col lg:flex-row justify-between items-start gap-4 mb-4">
        <div class="flex items-start gap-3 flex-1 min-w-0">
          <div class="flex flex-wrap gap-2 mb-2 lg:mb-0">
            <span v-if="post.isPinned" class="inline-flex items-center px-3 py-1 bg-gradient-to-r from-orange-500 to-amber-500 text-white rounded-full text-xs font-semibold shadow-sm">
              <svg class="w-3 h-3 mr-1" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
              </svg>
              置顶
            </span>
            <span v-if="post.isLocked" class="inline-flex items-center px-3 py-1 bg-gradient-to-r from-red-500 to-pink-500 text-white rounded-full text-xs font-semibold shadow-sm">
              <svg class="w-3 h-3 mr-1" viewBox="0 0 24 24" fill="currentColor">
                <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
              </svg>
              锁定
            </span>
          </div>
          <h3 class="text-xl lg:text-2xl font-bold text-gray-900 leading-tight group-hover:text-indigo-600 transition-colors duration-300 flex-1 min-w-0">
            <span class="line-clamp-2">{{ post.title }}</span>
          </h3>
        </div>
        <div class="flex gap-6 lg:gap-8">
          <span class="flex items-center gap-2 text-gray-500 text-sm bg-gray-50 px-3 py-2 rounded-lg">
            <svg class="w-4 h-4 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
            </svg>
            <span class="font-medium">{{ post.viewCount }}</span>
          </span>
          <span class="flex items-center gap-2 text-gray-500 text-sm bg-gray-50 px-3 py-2 rounded-lg">
            <svg class="w-4 h-4 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
            </svg>
            <span class="font-medium">{{ post.likeCount }}</span>
          </span>
          <span class="flex items-center gap-2 text-gray-500 text-sm bg-gray-50 px-3 py-2 rounded-lg">
            <svg class="w-4 h-4 text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
            </svg>
            <span class="font-medium">{{ post.replyCount }}</span>
          </span>
        </div>
      </div>
      
      <!-- 帖子内容预览 -->
      <div class="mb-6">
        <p class="text-gray-600 leading-relaxed text-base line-clamp-3">
          {{ getPostPreview(post.content) }}
        </p>
      </div>
      
      <!-- 帖子底部信息 -->
      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div class="flex items-center gap-4">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold text-sm">
              {{ (post.author?.name || '匿名用户').charAt(0) }}
            </div>
            <div>
              <div class="font-semibold text-gray-900">
                {{ post.author?.name || '匿名用户' }}
              </div>
              <div class="text-gray-500 text-sm">
                {{ formatTime(post.createdAt) }}
              </div>
            </div>
          </div>
        </div>
        <div class="flex items-center gap-2 text-indigo-600 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <span>阅读更多</span>
          <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
          </svg>
        </div>
      </div>
    </div>
  </article>
</template>

<script setup lang="ts">
import type { Post } from '~/types/post'

interface Props {
  post: Post
}

defineProps<Props>()

const navigateToPost = (postId: number) => {
  navigateTo(`/StudyArea/Forum/Post/${postId}`)
}

const getPostPreview = (content: string) => {
  // 移除HTML标签并截取前100个字符
  const textContent = content.replace(/<[^>]*>/g, '')
  return textContent.length > 100 ? textContent.substring(0, 100) + '...' : textContent
}

const formatTime = (dateString: string) => {
  const date = new Date(dateString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (minutes < 60) {
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else if (days < 7) {
    return `${days}天前`
  } else {
    return date.toLocaleDateString()
  }
}
</script>
